import { useRequest } from 'ahooks'
import { Drawer, Image, message } from 'antd'
import { FC, useEffect } from 'react'
import { getFoodItemDetailApi }from '../../../api/food'
interface IAppDrawer {
  foodId: number,
  onClose: () => void,
  open: boolean,
}
const AppDrawer: FC<IAppDrawer>= (props) => {
  const { foodId, open, onClose } = props
  const { data = [], run } = useRequest((foodId: number) => getFoodItemDetailApi(foodId), {
    manual: true,
  })
  useEffect(() => {
    if(foodId){
      message.success('获取菜品详细信息成功~')
    }
    run(foodId)
  }, [foodId])
  return (
    <Drawer title={data[0]?.foodCategory}  placement="right" open={open} onClose={onClose}>
      {
        data[0]! && (
          <>
            <Image src={ data[0].img1 } />
              <h2>{ data[0].foodName }</h2>
              <h4>{ data[0].foodDesc }</h4>
          </>
        )
      }
    </Drawer>
  )
}

export default AppDrawer